<template>
  <div class="designer">
    <el-dialog width="30%" :visible.sync="visible" title="验收人员" :close-on-click-modal="false" @close="handleBack">
      <c-form-container :column="1" :bottom="false">
        <el-form ref="form" :rules="formRules" :model="formData" label-width="120px">
          <el-form-item label="当前验收人员">
            <div>{{ detailData.accepterName }}</div>
          </el-form-item>
          <el-form-item prop="accepterCode" label="变更后验收人员">
            <input-with-dialog
              v-model="personArr"
              :props="{label:'userName',value:'account'}"
              :multiple="true"
              :focus-query="true"
              :config="designerConfig"
              @change="designerChange"
            />
          </el-form-item>
        </el-form>
      </c-form-container>
      <div slot="footer">
        <el-button size="mini" @click="handleBack">取消</el-button>
        <el-button type="primary" :loading="submiting" size="mini" @click="confirmHandle">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { saveAccept } from '@/api/check'
export default {
  name: 'AcceptPersonDlg',
  props: {
    visible: {
      type: Boolean,
      default: false,
      required: true
    },
    detailData: {
      type: [String, Object],
      default: ''
    }
  },
  data() {
    return {
      submiting: false,
      formData: {
        id: '',
        accepterCode: '',
        accepterName: ''
      },
      formRules: {
        accepterCode: [{ required: true, message: '请选择验收人员', trigger: 'change' }]
      },
      personArr: [],
      designerConfig: {
        title: '验收人员',
        interfacePath: `${process.env.VUE_APP_BASE_API}/api/v1/user/listUsers`,
        setting: [
          {
            prop: 'account',
            title: '编码'
          },
          {
            prop: 'userName',
            title: '名称'
          }
        ]
      }
    }
  },
  computed: {
    dialogShow: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  },
  created() {
    this.formData.id = this.detailData.id
  },
  methods: {
    designerChange(rows) {
      this.formData.accepterCode = rows.map(i => i.account).join(',')
      this.formData.accepterName = rows.map(i => i.userName).join(',')
    },
    // 返回
    handleBack() {
      this.dialogShow = false
      this.clearForm()
    },
    clearForm(done) {
      this.formData = {
        id: '',
        accepterCode: '',
        accepterName: ''
      }
      this.$refs.rulesForm && this.$refs.rulesForm.clearValidate()
      done && done()
    },
    confirmHandle() {
      if (this.submiting) return
      this.$refs.form.validate(validate => {
        if (validate) {
          this.submiting = true
          saveAccept(this.formData).then(res => {
            if (res.success) {
              this.$message({
                message: '操作成功',
                type: 'success'
              })
              this.submiting = false
              this.dialogShow = false
              this.clearForm()
              this.$emit('success', true)
            }
          }).catch(() => {
            this.submiting = false
          })
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.designer{
  display: inline-block;
}
</style>
